<template>
  <div>
    <Row class="search-info-style">
      <Col span="6">
        <span>区域：</span>
        <Input style="width: 70%;" v-model="searchInfo.area" />
      </Col>
      <Col span="6">
        <span>状态：</span>
        <Select v-model="searchInfo.state" clearable style="width:70%">
          <Option value="在用/在线">在用/在线</Option>
          <Option value="在用/离线">在用/离线</Option>
        </Select>
      </Col>
      <Col span="6">
        <span>名称：</span>
        <Input style="width: 70%;" v-model="searchInfo.title" />
      </Col>
      <Button class="new-btn-sty" @click="searchData()" style="float:right">
        <Icon type="ios-search" /> 搜索
      </Button>
    </Row>
    <Table border :columns="columns" :data="dataList">
      <template slot-scope="{ row }" slot="action">
        <img @click="show(row)" style="height: 30px" src="http://oss.lngov.top/lavatorylmpro/cg/LA03057/aca65f2456c456314cdc6c9bce464abc.png">
<!--        <Icon  size="40" type="ios-disc-outline" />-->
<!--        <Button type="primary" size="small" style="margin-right: 5px" >View</Button>-->
      </template>
    </Table>
    <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
  </div>
</template>
<script>
import { findSxtPageList } from '@/api/eventlist.js'
export default {
  data () {
    return {
      searchInfo: {
        pageSize: 10,
        pageNo: 1,
        totalnum: 0
      },
      dataList: [],
      columns: [
        { type: 'index', width: 60, align: 'center' },
        { title: '账号', key: 'loginname', width: 100, align: 'center' },
        { title: '名称', key: 'title', width: 200, align: 'center' },
        { title: '区域', key: 'area', width: 80, align: 'center' },
        { title: '街道', key: 'street', width: 80, align: 'center' },
        { title: '地址', key: 'arrdess', width: 200, align: 'center' },
        { title: '纬度', key: 'wd', width: 100, align: 'center' },
        { title: '纬度', key: 'jd', width: 100, align: 'center' },
        { title: '设备编号', key: 'd_code', width: 100, align: 'center' },
        { title: '装箱时间', key: 'boxtime', width: 100, align: 'center' },
        { title: '国标码', key: 'code', width: 100, align: 'center' },
        { title: '状态', key: 'state', width: 100, align: 'center' },
        { title: '操作', slot: 'action', width: 100, align: 'center' }
      ]
    }
  },
  methods: {
    init () {
      findSxtPageList(this.searchInfo).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '获取列表失败', desc: res.data.errmsg })
        }
      })
    },
    show (item) {
      window.open('http://120.201.102.26/dispatch-ms/#/conference/single_url?ipc_live=1&key=d455b1f7-84c3-412f-a56c-5de65d3661bc&historyEnable=1&gbids=' + item.code)
    },
    searchData () {
      this.searchInfo.pageNo = 1
      this.init()
    },
    changePageNo (pageNo) {
      console.log(pageNo)
      this.searchInfo.pageNo = pageNo
      this.init()
    },
    size (pageSize) {
      this.searchInfo.pageSize = pageSize
      this.changePageNo(1)
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style>
.search-info-style {
  margin: 10px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
</style>
